import React from 'react';
import {
  Card,
  Button,
  Row,
  Col,
  Icon,
  Tabs,
  Table,
  Radio,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
  Input,
  Divider,
  message,
  Upload,
  Modal,
  List,
  Switch,
  notification,
  Popover,
  Select
} from 'antd';

const Option = Select.Option;

import { StyleSheet, css } from 'aphrodite';

import { swap } from 'react-magic';
import styles from './AddCategory.less';
import { getValueWithLocalStorage } from '@/utils/authority';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
const { MonthPicker, RangePicker } = DatePicker;

import  config from '../../../config/web.config'

const styles_animation = StyleSheet.create({
  magic: {
    animationName: swap,
    animationDuration: '1s',
  },
});

import moment from 'moment';

import { connect } from 'dva';

const namespace = 'news';

const dateFormat = 'YYYY-MM-DD';


const userInfo = getValueWithLocalStorage('userinfo');

import router from 'umi/router';
import {parseIntVaild} from "../../utils/LoginUserUtil";

const mapStateToProps = state => {
  const ret = state[namespace].ret;
  const categorys = state[namespace].categorys;

  return {
    categorys,
    ret,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    addNewsCategory: (para, callback) => {
      const action = {
        type: `${namespace}/addNewsCategory`,
        payload: {
          ...para,
          addCallback: callback,
        },
      };
      dispatch(action);
    },

    editNewsCategory: (para, callback) => {
      const action = {
        type: `${namespace}/editNewsCategory`,
        payload: {
          ...para,
          onEditCallback: callback,
        },
      };
      dispatch(action);
    },
  };
};
@connect(
  mapStateToProps,
  mapDispatchToProps
)
export default class AddCategory extends React.Component {
  constructor(props) {
    super(props);
    const isNew =  this.props.location.query.name == undefined
    this.state = {
      ret:{},
      id: isNew ? '' : this.props.location.query._id,
      name:isNew ? '' : this.props.location.query.name,
      isNew:isNew,
      isLoading:false
    };
  }

  /*****************************model's callback********************************/

  addCallback = res => {
    if (res.code == 0) {
      message.error(res.msg);
    } else {
      message.success(res.msg);
      router.push('/news/categorys');
    }
  };

  /**
   * 编辑保存的回调
   * @param res
   */
  onEditCallback = res => {
    if (res.code == 0) {
      message.error(res.msg);
    } else {
      message.success(res.msg);
      router.push('/news/categorys');
    }
  };

  componentDidMount = () => {


  };

  handleChange = (value)=>{
    console.log(`selected ${value}`);
  }

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = file => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };

  handleChange1 = ({ file, fileList, event }) => {
    if (file.status == 'done') {
      message.success('图片上传成功');
    }
    this.setState({ h_picList: fileList,headurl: file.response == undefined ? '' :file.response.ret.url});
  };

  beforeUpload1 = (file, fileList) => {
    const isJPG =
      file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
    if (!isJPG) {
      message.error('只能上传.jpeg,png,jpg格式的图片');
      notification.open({
        message: '上传失败',
        description: '只能上传.jpeg,png,jpg格式的图片',
      });
      setTimeout(() => {
        this.setState({ h_picList: [] });
      }, 500);
    }

    const isLt2M = file.size / 1024 < 500;
    if (!isLt2M) {
      alert('图片需要小于500k!');
      setTimeout(() => {
        this.setState({ h_picList: [] });
      }, 500);
    }
    return isLt2M;
  };

  render() {
    var that = this;

    const topContent = (
      <Row className={styles.row} gutter={10}>
        <Col span={3}>
          <span className={styles.tipLab}>选择活动类型</span>
        </Col>
        <Col span={10}>
          <RadioGroup
            className={styles.typeBg}
            defaultValue={that.state.type}
            onChange={e => {
              that.setState({ type: parseInt(e.target.value) }, () => {
                if (parseInt(that.state.type) == 0) {
                  message.success('当前活动类型是:普通宣传活动');
                } else if (parseInt(that.state.type) == 1) {
                  message.success('当前活动类型是:注册登记活动');
                }
              });
            }}
          >
            <RadioButton value="0">普通宣传活动</RadioButton>
            <RadioButton value="1">注册登记活动</RadioButton>
          </RadioGroup>
        </Col>
      </Row>
    );

    const NUM_TITLE = 20;
    const NUM_TITLEDESC = 30;
    const NUM_CONTENT = 140;
    const NUM_PIC = 1;
    const userInfo = getValueWithLocalStorage('userinfo');
    const { previewVisible, previewImage } = this.state;

    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">上传</div>
      </div>
    );

    const dateFormat = 'YYYY-MM-DD';

    return (
      <Card title={that.state.isNew ? '新增分类' : '编辑分类'} bordered={false}>

        <Row className={styles.row} gutter={10}>
          <Col span={3}>
            <span className={styles.tipLab}>分类名</span>
          </Col>
          <Col span={5}>
            <Input
              defaultValue={that.state.name}
              onChange={e => {
                that.setState({ name: e.target.value });
              }}
            />
          </Col>
        </Row>



        <Row className={styles.row} gutter={48}>
          <Col offset={3} span={18}>
            <Button
              type="primary"
              block
              onClick={() => {

                if(that.state.name.length == 0){
                  message.error('分类名不能为空')
                  return
                }

                if (that.state.isNew) {
                  that.props.addNewsCategory({name:that.state.name}, that.addCallback);
                } else {
                  this.props.editNewsCategory(
                    {name:that.state.name,id:that.state.id},
                    that.onEditCallback
                  );
                }
              }}
            >
              {that.state.isNew ? '发布' : '保存编辑'}
            </Button>
          </Col>
        </Row>
      </Card>
    );
  }
}
